<!-- 首页 -->
<template>
	<loading-page v-if="data.loading" :transparent="data.loadingTransparent" />
	<!-- 顶部搜索 -->
	<view class="header">
		<view class="bg"></view>
		<view class="search" @click="search()">
			<icon class="iconfont icon">&#xe7e8;</icon>
			<text class="txt">行业大牛任你搜</text>
		</view>
	</view>
	<!-- 服务分类 -->
	<view class="service">
		<view class="item" v-for="(item,index) in data.service" :key="index" @click="clickService(item)">
			<image class="img" :src="item.icon" mode="aspectFill" v-if="!item.imgError" @error="imgError(item)"></image>
			<text class="txt">{{item.name}}</text>
		</view>
	</view>
	<!-- 发布悬赏 -->
	<view class="register">
		<view class="hd">
			<text class="small">选来选去太耗精力？</text>
			<text class="strong">直接发布悬赏，优质大牛主动联系您</text>
		</view>
		<view class="bd">
			<view class="label">
				<text class="txt">我需要</text>
			</view>
			<navigator class="value" url="/subpages/task/add/add?from=task" :hover-stop-propagation="true" hover-class="none">
				<swiper class="swiper" circular autoplay vertical :interval="2000">
					<swiper-item class="swiper-item" v-for="(item,index) in data.register" :key="index">
						<text>{{item}}</text>
					</swiper-item>
				</swiper>
			</navigator>
		</view>
		<view class="ft">
			<navigator class="btn" url="/subpages/task/add/add?from=task" :hover-stop-propagation="true">免费发布</navigator>
		</view>
	</view>
	<!-- 最新悬赏 -->
	<view class="needs">
		<view class="hd">
			<view class="title">
				<text>最新悬赏</text>
			</view>
			<navigator class="more" url="/pages/task/task" open-type="switchTab" :hover-stop-propagation="true">
				<text>查看全部</text>
				<icon class="iconfont icon">&#xe7d3;</icon>
			</navigator>
		</view>
		<new-needs :list="data.needs" />
	</view>
	<!-- 推荐 -->
	<view class="recommoned">
		<view class="hd">
			<text>为您推荐</text>
		</view>
		<view class="list">
			<template v-for="(item,index) in data.recommoned" :key="index">
				<list-merchant-item :item="item" :index="index" />
			</template>
		</view>
		<!-- 更多数据 -->
		<uni-load-more status="noMore" :contentText="data.loadMoreText"></uni-load-more>
	</view>
</template>
<script setup>
	import { ref, reactive, defineComponent } from 'vue';
	import { onLoad, onHide, onTabItemTap } from '@dcloudio/uni-app';
	import { getIndexData } from '@/common/api/index.js';
	import listMerchantItem from '@/pages/find/components/list-merchant-item.vue';
	import newNeeds from './components/new-needs.vue';
	onLoad(() => {
		init();
	});
	onHide(() => {
		uni.$emit('CLOSESERVICEPOPUP');
	});
	onTabItemTap(() => {
		data.loadingTransparent = true;
		init();
	});
	defineComponent({
		listMerchantItem,
		newNeeds
	});
	const data = reactive({
		loading: true,
		loadingTransparent: false,
		service: [],
		register: ['PPT定制', '施工方案', '活动方案', '演讲稿'],
		needs: [],
		recommoned: [],
		loadMoreText: {
			contentnomore: '没有更多数据啦~'
		}
	});
	// 初始化数据
	async function init() {
		data.loading = true;
		try {
			const res = await getIndexData();
			data.service = res.data.config.home_menu.map(item => {
				return {
					name: item.name,
					value: item.type,
					icon: item.img
				}
			});
			data.needs = res.data.new_tasks;
			data.recommoned = res.data.commend_merchant;
		} catch (e) {
			//TODO handle the exception
		}
		setTimeout(() => {
			data.loading = false;
		}, 100)
	}
	// 搜索
	function search() {
		uni.navigateTo({
			url: `/subpages/search/search`
		})
	}
	// 点击服务图标
	function clickService(item) {
		uni.navigateTo({
			url: `/subpages/search/list/list?service=${JSON.stringify(item)}&tab=0`
		})
	}
	// 处理异常图片
	function imgError(item) {
		item.imgError = true;
	}
</script>
<style>
	page {
		background-color: #F4F4F4;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	$w:694rpx;
	@mixin common {
		width: $w;
		margin: 0 auto 28rpx;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, .08);
		border-radius: 18rpx;
		background-color: #fff;
	}
	.header {
		position: relative;
		padding: 30rpx 0 40rpx;
		background-color: $color;
		.bg {
			position: absolute;
			top: 120rpx;
			width: 750rpx;
			height: 120rpx;
			overflow: hidden;
			&::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 0;
				width: 150%;
				height: 100%;
				border-radius: 50%;
				transform: translateX(-50%);
				background-color: $color;
			}
		}
		.search {
			@include flex(row, flex-start);
			position: relative;
			z-index: 2;
			width: $w;
			height: 80rpx;
			margin: 0 auto;
			padding: 0 36rpx;
			border-radius: 40rpx;
			background-color: #fff;
			.icon {
				margin-right: 8rpx;
				font-size: 36rpx;
				color: #C3C3C3;
			}
			.txt {
				font-size: 30rpx;
				color: #aaa;
			}
		}
	}
	.service {
		@include flex(row, flex-start);
		@include common;
		position: relative;
		z-index: 3;
		padding: 26rpx 10rpx;
		.item {
			@include flex(column);
			width: 20%;
			margin: 10rpx 0;
			.img {
				width: 52rpx;
				height: 52rpx;
			}
			.txt {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #555;
			}
		}
	}
	.register {
		@include common;
		padding: 34rpx 28rpx;
		.hd {
			@include flex(column);
			.small {
				font-size: 24rpx;
				color: $color;
			}
			.strong {
				position: relative;
				margin-top: 20rpx;
				font-weight: 700;
				font-size: 32rpx;
				color: #000;
				&::before,
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					right: -42rpx;
					transform: translateY(-50%);
					width: 32rpx;
					height: 4rpx;
					background-color: #000;
				}
				&::before {
					right: auto;
					left: -42rpx;
				}
			}
		}
		.bd {
			@include flex(row, flex-start);
			flex-wrap: nowrap;
			width: 100%;
			height: 88rpx;
			margin: 40rpx 0 30rpx;
			border: 1px solid #ECECEC;
			border-radius: 8rpx;
			background-color: #ECECEC;
			.label {
				padding: 0 30rpx;
				border-right: 1px solid #ddd;
				white-space: nowrap;
				font-size: 30rpx;
			}
			.value {
				height: 100%;
				padding: 0 30rpx;
				.swiper {
					width: 430rpx;
					height: 100%;
				}
				.swiper-item {
					line-height: 88rpx;
					font-size: 30rpx;
					color: #000;
				}
			}
		}
		.ft {
			.btn {
				width: 640rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: $color;
				border-radius: 12rpx;
				text-align: center;
				font-size: 30rpx;
				color: #fff;
			}
		}
	}
	.needs {
		@include common;
		padding: 30rpx 0;
		.hd {
			@include flex;
			padding: 0 28rpx;
			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #000;
			}
			.more {
				@include flex;
				font-size: 24rpx;
				color: #aaa;
				.icon {
					margin-top: 2rpx;
					font-size: 26rpx;
				}
			}
		}
	}
	.recommoned {
		padding: 0 28rpx 10rpx;
		.hd {
			margin-bottom: 20rpx;
			font-size: 32rpx;
			color: #000;
		}
	}
</style>
